<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   <script src="figue.js" type="text/javascript"></script>
   <script src="util.js" type="text/javascript"></script>
   <script src="clustermap.js" type="text/javascript"></script>

<style>
.map-medium{
         width: 700px;
         height: 550px;
         margin: 20px auto;
         clear: both;
}

</style>

<script language="JavaScript">

function initialize() {

	// initialize the map
	var myOptions = {
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	map.setCenter (new google.maps.LatLng(51.364,4.735)) ;
	map.setZoom(7) ;
	
	// Cluster the markers (i.e. the Placemarks contained by the KML) and display the cluster on the map 
	var hcmap = new clustermap.HCMap ({'map': map , 'url': 'example-data.kml'}) ;

}
</script>

</head>

<body onload="initialize()" >

<div id="map_canvas" class="map-medium"></div>

</div>

</body>
</html>




